<template>
  <view class="hot-list-container">
    <view class="hot-list-title"
      ><text>慕课热搜-全网技术-一网打尽</text></view
    >
    <view class="hot-list">
      <block v-for="(item, index) in searchHotList" :key="index">
        <view class="hot-list-items" @click="onClieckListItem(item)">
          <hotRanking
            class="hot-list-ranking"
            :ranking="index + 1"
          ></hotRanking>
          <text class="hot-list-text">{{ item.label }}</text>
          <image
            v-if="index <= 2"
            class=""
            src="/static/images/hot-icon.png"
            mode="aspectFit"
          />
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import { getSearchHotListAPI } from "../../apis/search";
export default {
  name: "search-hot-list",
  data() {
    return {
      searchHotList: [],
    };
  },
  created() {
    this.loadSearchHotList();
  },
  methods: {
    async loadSearchHotList() {
      const { data: res } = await getSearchHotListAPI();
      this.searchHotList = res.list;
      // console.log(this.searchHotList);
    },
    onClieckListItem(item){
      // console.log(item);
      this.$emit('onHotListClick',item)
    }
  },
};
</script>

<style lang="scss" scoped>
.hot-list-container {
  display: flex;
  flex-direction: column;
  .hot-list-title {
    height: 20px;
    // box-shadow: 2px 2px 5px 1px rgba(143,143,143,0.1);
    text {
      line-height: 16px;
      font-size: 16px;
      font-weight: 600;
      color: $uni-hot-color;
    }
  }

  .hot-list {
    margin-top: 15px;
    .hot-list-items {
      display: flex;
      align-items: center;
      // justify-content: start;
      
      padding: 10px 0px;
      .hot-list-ranking {
        margin-right: 5px;
      }
      .hot-list-text {
        font-size: 15px;
      }
      image {
        width: 15px;
        height: 15px;
      }
    }
  }
}
</style>
